<div [@routerTransition]>
  <!-- <div class="m-subheader">
    <div class="d-flex align-items-center">
      <div class="mr-auto">
        <h3 class="m-subheader__title"><span>生产准备</span></h3>
      </div>
    </div>
    style="background-color: #2f2e3c; height: 62rem"
  </div> -->

  <div
    class="m-content"
    style="
      height: 68rem;
      background: url(/assets/common/images/demo/bg02.png);

      background-repeat: no-repeat;
      background-size: 100% 100%;
      -moz-background-size: 100% 100%;
    "
  >
    <div class="m-portlet__body">
      <div class="row">
        <div class="col-md-12 datachar-header">
          <div class="header-left fl" id="time"></div>
          <div class="header-center fl">
            <div class="header-title">钣金车间经营管理数据分析</div>
            <div class="header-img"></div>
          </div>
          <div class="header-right fl">
            <a
              class="btn btn-primary"
              href="/#/app/datadisplay/demo1"
              style="background-color: transparent; margin-top: 2rem"
            >
              月度计划及生产准备
            </a>
            <a
              class="btn btn-primary"
              href="/#/app/datadisplay/demo2"
              style="background-color: transparent; margin-top: 2rem"
            >
              制造执行数据分析
            </a>

            <button
              class="btn btn-primary"
              *ngIf="isshow == true"
              (click)="hiddentop()"
              style="background-color: transparent; margin-top: 2rem"
            >
              隐藏
            </button>
            <button
              class="btn btn-primary"
              *ngIf="isshow == false"
              (click)="showtop()"
              style="background-color: transparent; margin-top: 2rem"
            >
              显示
            </button>
          </div>
          <div class="header-bottom fl"></div>
        </div>
        <div class="col-md-12">
          <div class="dashboard_graph x_panel" style=" height: 51px;display: flex;justify-content: flex-end;">
              <div style="width: 21%; display:flex; align-items: center;" >
             <label style ="margin-right: 10px; margin-bottom: 0px;color: #fff!important;"
             >请选择时间:</label >
             <p-calendar [(ngModel)]="getTime" view="month"  dateFormat="yy-mm" [yearNavigator]="true" [yearNavigator]="true"  yearRange="1000:2050" ></p-calendar>
             <button 
             class="btn btn-primary"
             (click)="init()"
             style="height: 32px; margin-left: 5px;line-height: 100%;background-color: #001131;"
            >
             查询
         </button>
          </div>
          </div>
        </div>
        <div class="col-md-12">
          <div class="col-md-3 datachar-left">
            <div class="datachar-left-top">
              <div class="datachar-left-top-border">
                <div class="col-md-12" style="height: 50%; padding: 1rem">
                  <div class="echart wenzi">
                    <div class="gun">
                      <span style="">任务号</span>
                      <span>图号</span>
                      <span>产品数量</span>
                      <span>总金额</span>
                    </div>
                    <div id="FontScroll" class="myscroll">
                      <ul>
                        <li *ngFor="let item of priceListDto;let key=index">
                          <div class="fontInner clearfix">
                            <span>{{item.taskCode}}</span>
                            <span>{{item.drawingCode}}</span>
                            <span>{{item.amountPlanned}}</span>
                            <span>{{item.totalAmount}}</span>
                          </div>
                        </li>
                        <!-- <li>
                          <div class="fontInner clearfix">
                            <span>task-53-002</span>
                            <span>1CE311-100</span>
                            <span>6</span>
                            <span>35264</span>
                          </div>
                        </li>
                        <li>
                          <div class="fontInner clearfix">
                            <span>task-53-003</span>
                            <span>1CE311-100</span>
                            <span>12</span>
                            <span>152436</span>
                          </div>
                        </li>
                        <li>
                          <div class="fontInner clearfix">
                            <span>task-53-004</span>
                            <span>1CE311-100</span>
                            <span>5</span>
                            <span>84562</span>
                          </div>
                        </li>
                        <li>
                          <div class="fontInner clearfix">
                            <span>task-53-005</span>
                            <span>1CE311-100</span>
                            <span>8</span>
                            <span>75862</span>
                          </div>
                        </li>
                        <li>
                          <div class="fontInner clearfix">
                            <span>task-53-006</span>
                            <span>1CE311-100</span>
                            <span>11</span>
                            <span>114236</span>
                          </div>
                        </li>
                        <li>
                          <div class="fontInner clearfix">
                            <span>task-53-007</span>
                            <span>1CE311-100</span>
                            <span>16</span>
                            <span>243215</span>
                          </div>
                        </li>
                        <li>
                          <div class="fontInner clearfix">
                            <span>task-53-008</span>
                            <span>1CE311-100</span>
                            <span>7</span>
                            <span>52364</span>
                          </div>
                        </li>
                        <li>
                          <div class="fontInner clearfix">
                            <span>task-53-009</span>
                            <span>1CE311-100</span>
                            <span>14</span>
                            <span>112365</span>
                          </div>
                        </li>
                        <li>
                          <div class="fontInner clearfix">
                            <span>task-53-010</span>
                            <span>1CE311-100</span>
                            <span>9</span>
                            <span>99120</span>
                          </div>
                        </li> -->
                      </ul>
                    </div>
                  </div>
                </div>
                <div
                  class="col-md-6"
                  style="
                    border-top: 1px solid rgba(25, 186, 139, 0.17);
                    height: 50%;
                    float: left;
                    padding: 1rem;
                  "
                >
                  <div class="com-count-title">营业收入班组分布</div>
                  <div id="zhanbi02" style="padding: 1rem; height: 25rem"></div>
                </div>
                <div
                  class="col-md-6"
                  style="
                    border-top: 1px solid rgba(25, 186, 139, 0.17);
                    border-left: 1px solid rgba(25, 186, 139, 0.17);
                    height: 50%;
                    float: left;
                    padding: 1rem;
                  "
                >
                  <div class="com-count-title">营业收入型号占比</div>
                  <div
                    id="chart3"
                    class="allnav"
                    style="padding: 1rem; height: 25rem"
                  ></div>
                </div>
              </div>
            </div>
            <!-- <div class="datachar-left-bottom"></div> -->
          </div>
          <div class="col-md-6 datachar-center">
            <div class="datachar-center-top">
              <div class="datachar-center-top-border">
                <div
                  style="
                    height: 10%;
                    border-bottom: 1px solid rgba(25, 186, 139, 0.17);
                  "
                  class="col-md-12"
                >
                  <table class="table_data02">
                    <tr>
                      <td class="font07">收入总量</td>
                      <td class="font03">{{totalRevenue}}</td>
                      <td class="font07">制造投入量</td>
                      <td class="font02">{{totalDelivery}}</td>
                      <td class="font07">总利润</td>
                      <td class="font01">{{totalRevenue-totalDelivery}}</td>
                      <!-- <td class="font01">222</td> -->
                    </tr>
                    <!-- <tr>
                      <td class="font07">总利润</td>
                      <td class="font01">1000万元</td>
                      <td class="font07">利润率</td>
                      <td class="font01">464.15%</td>
                    </tr> -->
                  </table>
                </div>
                <div
                  style="
                    height: 50%;
                    border-bottom: 1px solid rgba(25, 186, 139, 0.17);
                  "
                  class="col-md-12"
                >
                  <div
                    class="col-md-4"
                    style="
                      float: left;
                      border-right: solid 1px rgba(25, 186, 139, 0.17);
                      height: 100%;
                      padding: 2rem;
                    "
                  >
                    <div
                      class="zhanleft01"
                      id="allAly01"
                      style="height: 100%"
                    ></div>
                  </div>
                  <div
                    class="col-md-4"
                    style="
                      float: left;
                      border-right: solid 1px rgba(25, 186, 139, 0.17);
                      height: 100%;
                      padding: 2rem;
                    "
                  >
                    <div
                      class="zhanleft01"
                      id="allAly02"
                      style="height: 100%"
                    ></div>
                  </div>
                  <div
                    class="col-md-4"
                    style="float: left; height: 100%; padding: 2rem"
                  >
                    <div
                      class="zhanleft01"
                      id="allAly03"
                      style="height: 100%"
                    ></div>
                  </div>
                </div>
                <div style="height: 40%; padding: 1rem" class="col-md-12">
                  <div style="height: 100%" id="allAly04"></div>
                </div>
              </div>
            </div>
            <!-- <div class="datachar-center-center"></div> -->
          </div>
          <div class="col-md-3 datachar-right">
            <div class="datachar-right-top">
              <div class="datachar-right-top-border">
                <div class="col-md-12" style="height: 50%; padding: 1rem">
                  <div class="com-count-title">原材料费用统计</div>

                  <div class="com-screen-content">
                    <ul class="data-label">
                      <li class="active" data-type="1" (click)="tabclick()">
                        综合
                      </li>
                      <li data-type="2" (click)="tabclick()">主材</li>
                      <li data-type="3" (click)="tabclick()">辅材</li>
                    </ul>
                    <ul class="use-data"></ul>
                    <div
                      id="char1"
                      style="margin-top: 10px; width: 100%; height: 17rem"
                    ></div>
                  </div>
                </div>
                <div
                  class="col-md-6"
                  style="
                    border-top: 1px solid rgba(25, 186, 139, 0.17);
                    height: 50%;
                    float: left;
                    padding: 1rem;
                  "
                >
                  <div class="com-count-title">工时型号分配</div>
                  <div
                    id="chart_1"
                    class="chart"
                    style="width: 100%; height: 100%"
                  ></div>
                </div>
                <div
                  class="col-md-6"
                  style="
                    border-top: 1px solid rgba(25, 186, 139, 0.17);
                    border-left: 1px solid rgba(25, 186, 139, 0.17);
                    height: 50%;
                    float: left;
                    padding: 1rem;
                  "
                >
                  <div class="com-count-title">工装使用</div>
                  <div
                    style="height: 20rem; width: 100%"
                    id="time-step-detial"
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
